<template>
  <div>
    <el-row>
      <el-button type="primary" @click="addEntity">添加</el-button>
      <el-button type="danger" @click="deleteEntity">批量删除</el-button>
    </el-row>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="deptno" label="deptno" width="80">
      </el-table-column>
      <el-table-column prop="dname" label="dname" width="150">
      </el-table-column>
      <el-table-column prop="loc" label="loc"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="entityEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteEntity(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next, total,sizes"
      :total="total"
      :page-size="size"
      :page-sizes="pageSizes"
      @next-click="currentChange"
      @prev-click="currentChange"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </el-pagination>

    <el-dialog title="用户" :visible.sync="entityDialogVisible" width="60%">
      <el-form :model="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="dname" prop="dname">
          <el-input v-model="form.dname"></el-input>
        </el-form-item>

        <el-form-item label="loc" prop="loc">
          <el-input v-model="form.loc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="entityDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // Model中原本是没有数据的
      entityDialogVisible: false,
      selectionId: [], // 定义一个数组用来接收用户勾选的数据
      total: 0, // 总条数,
      size: 5, //每页显示的条数
      current: 1, // 当前页
      pageSizes: [5, 10, 20],
      form: {
        dname: "Java",
        loc: "西部硅谷",
      },
    };
  },

  // 自定义的函数
  methods: {
    sizeChange(size) {
      this.size = size;
      this.getEntityList();
    },
    currentChange(current) {
      // 1.修改当前页
      this.current = current;
      // 2.重新查询数据
      this.getEntityList();
    },
    addEntity() {
      this.entityDialogVisible = true;
    },

    // 单个删除，批量删除(不要传参)
    deleteEntity(row) {
      this.selectionId.push(row.deptno);

      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.http({
            url: "dept/remove",
            method: "POST",
            data: this.selectionId, // 传递是选择的数据
          }).then(({ data }) => {
            if (data.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getEntityList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    entityEdit(row) {
      this.http({
        url: "dept/info/" + row.deptno,
        method: "GET",
      }).then(({ data }) => {
        this.form = data.data;
        // 3.显示对话框
        this.entityDialogVisible = true;
      });
    },

    getEntityList() {
      var app = this;
      this.http
        .request({
          url: "dept/page",
          method: "POST",
          data: {
            current: this.current,
            size: this.size,
          },
        })
        .then(({ data }) => {
          app.tableData = data.data.records;
          app.current = data.data.current;
          app.size = data.data.size;
          app.total = data.data.total;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    formSubmit() {
      var url = this.form.deptno ? "update" : "save";
      this.http({
        url: "dept/" + url,
        method: "POST",
        data: this.form,
      }).then(({ data }) => {
        if (data.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.entityDialogVisible = false;
          this.getEntityList();
        }
      });
    },
  },
  mounted() {
    this.getEntityList();
  },
};
</script>

<style>
</style>